<template>
  <div>
    <el-menu>
      <h2 class="h1">员工管理</h2>
    </el-menu>
    <el-menu>
      <div class="div1">
        <el-button size="small" type="danger" @click="dels()" round
          >批量删除</el-button
        >
        <ModalBox
          qwe="small"
          qwr="添加员工"
          qwt="primary"
          qwy="添加员工"
          :qwu="tableData1"
          :qwi="1"
          v-on:dataEvent2="add"
        ></ModalBox>
      </div>
    </el-menu>
    <el-table
      :data="tableData"
      style="width: 100%; padding: 0 30px 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column label="有赞账号" width="130" prop="id">
      </el-table-column>
      <el-table-column label="员工姓名" width="130" prop="name">
      </el-table-column>
      <el-table-column label="联系方式" width="130" prop="phone">
      </el-table-column>
      <el-table-column label="角色" width="170" prop="identity">
      </el-table-column>
      <el-table-column label="添加时间" width="130" prop="regTime">
      </el-table-column>
      <el-table-column label="操作" width="190">
        <template slot-scope="scope">
          <span>
            <ModalBox
              qwe="mini"
              qwr="修改"
              qwt="warning"
              qwy="修改员工"
              :qwu="{ ...scope.row }"
              :qwi="2"
              v-on:dataEvent2="remove"
            ></ModalBox>
          </span>
          <el-button
            size="mini"
            type="danger"
            class="div4"
            @click="handleDelete(scope.row)"
            round
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="num"
      class="div3"
      @current-change="page1"
      @prev-click="page2"
      @next-click="page3"
    >
    </el-pagination>
  </div>
</template>
<script>
import ModalBox from "../components/ModalBox.vue";
import { getStaff, delStaff, addStaff, removeStaff } from "../http/staff";
export default {
  name: "SetEmployeesView",
  components: { ModalBox },
  data() {
    return {
      tableData: [],
      tableData1: {
        phone: null,
        identity: null,
        name: null,
        pwd: null,
      },
      multipleSelection: [],
      num: 0,
      page: 1,
      lim: 10,
    };
  },
  created() {
    this.init();
  },
  methods: {
    add(e) {
      console.log(e);
      addStaff(e)
        .then((res) => {
          console.log(res);

          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    remove(e) {
      console.log(e);
      removeStaff(e)
        .then((res) => {
          console.log(res);
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    init() {
      const page = this.page + "";
      const lim = this.lim + "";
      getStaff(page, lim)
        .then((res) => {
          this.tableData = res.data.data.admin;
          this.num = res.data.data.count;
        })
        .catch((err) => {
          console.log(1, err);
        });
    },
    dels() {
      let arr = [];
      this.multipleSelection.forEach((item) => {
        arr.push(item.id);
      });
      let ids = arr.join();
      let ids1 = { ids };
      console.log(ids1);
      delStaff(ids1)
        .then((res) => {
          console.log(res);
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleDelete(row) {
      let ids = row.id;
      let ids1 = { ids };
      console.log(ids1);
      delStaff(ids1)
        .then((res) => {
          console.log(res);
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    page1(val) {
      this.page = val;
      console.log(this.page);
      this.init();
    },
    page2() {
      this.page -= 1;
    },
    page3() {
      this.page += 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.h1 {
  padding: 15px 15px 0;
  font-weight: 200;
}
.div1 {
  text-align: right;

  padding: 0 30px 10px;
}
.div2 {
  margin: 0 auto;
}
.div3 {
  padding: 15px 30px;
  background: #fff;
  text-align: right;
}
.div4 {
  margin: 0 10px;
}
</style>